import React, { CSSProperties, FC } from 'react'
import styled from "styled-components"
import * as echarts from 'echarts'
import { ECharts } from 'echarts'
import { IChartData, IPieChart, PieChartData } from '@/types/pages/salesAnalysis/interface'
import Title from '@/components/pages/titleTop'
import bg_verticle from '@/assert/images/salesAnalysis/bg_verticle.png'
import { observer } from 'mobx-react'
import { IDateLineChart } from '@/types/echart'
import chinaJson from './china.json';

const ChartPie = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    padding:3rem;
    /* background-image: url(${bg_verticle}); */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .content{
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      width: 95%;
      height: 95%;
    }

`
const getOption = (myChart: ECharts, chartparams: IDateLineChart) => {

  return  {
    title: {
      text: ' ',
      // subtext: 'Data from www.census.gov',
      // sublink: 'http://www.census.gov/popest/data/datasets.html',
      left: 'right'
    },
    tooltip: {
      trigger: 'item',
      showDelay: 0,
      transitionDuration: 0.2,
      formatter: function (params: { value: string; seriesName: string; name: string }) {
        const value = (String(params.value)).split('.');
        const valueStr = value[0].replace(
          /(\d{1,3})(?=(?:\d{3})+(?!\d))/g,
          '$1,'
        );
        return params.seriesName + '<br/>' + params.name + ': ' + valueStr;
      }
    },
    visualMap: {
      left: 'right',
      min:  1,
      max: 2000,
      inRange: {
        color: [
          '#87CEEB',
          '#6495ED',
          '#39D4F9',
          '#027C99',
          '#4169E1',
          '#6A5ACD',
        ]
      },
      text: ['High', 'Low'],
      calculable: true
    },
    toolbox: {
      show: false,
      // orient: 'vertical',
      left: 'left',
      top: 'top',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    dataset:chartparams.dataset,
    series: [
      {
        name: '',
        type: 'map',
        roam: true,
        map: 'china',
        emphasis: {
          label: {
            show: true
          }
        },
        // data: [
        //   { name: '北京', value: 1122 },
        //   { name: '天津', value: Math.round(Math.random() * 2000) },
        //   { name: '上海', value: Math.round(Math.random() * 2000) },
        //   { name: '重庆', value: Math.round(Math.random() * 2000) },
        //   { name: '河北', value: 0 },
        //   { name: '河南', value: Math.round(Math.random() * 2000) },
        //   { name: '云南', value: 500 },
        //   { name: '辽宁', value: 305 },
        //   { name: '黑龙江', value: Math.round(Math.random() * 2000) },
        //   { name: '湖南', value: 200 },
        //   { name: '安徽', value: Math.round(Math.random() * 2000) },
        //   { name: '山东', value: Math.round(Math.random() * 2000) },
        //   { name: '新疆', value: 34 },
        //   { name: '江苏', value: Math.round(Math.random() * 2000) },
        //   { name: '浙江', value: Math.round(Math.random() * 2000) },
        //   { name: '江西', value: Math.round(Math.random() * 2000) },
        //   { name: '湖北', value: Math.round(Math.random() * 2000) },
        //   { name: '广西', value: Math.round(Math.random() * 2000) },
        //   { name: '甘肃', value: Math.round(Math.random() * 2000) },
        //   { name: '山西', value: Math.round(Math.random() * 2000) },
        //   { name: '内蒙古', value: Math.round(Math.random() * 2000) },
        //   { name: '陕西', value: Math.round(Math.random() * 2000) },
        //   { name: '吉林', value: Math.round(Math.random() * 2000) },
        //   { name: '福建', value: Math.round(Math.random() * 2000) },
        //   { name: '贵州', value: Math.round(Math.random() * 2000) },
        //   { name: '广东', value: Math.round(Math.random() * 2000) },
        //   { name: '青海', value: Math.round(Math.random() * 2000) },
        //   { name: '西藏', value: 2000 },
        //   { name: '四川', value: Math.round(Math.random() * 2000) },
        //   { name: '宁夏', value: Math.round(Math.random() * 2000) },
        //   { name: '海南', value: Math.round(Math.random() * 2000) },
        //   { name: '台湾', value: Math.round(Math.random() * 2000) },
        //   { name: '香港', value: Math.round(Math.random() * 2000) },
        //   { name: '澳门', value: Math.round(Math.random() * 2000) }
        // ]
      }
    ]
  };

}


const Content: FC<IDateLineChart&{style?:CSSProperties}> = function (props) {
  let myEchart: ECharts;

  return (
    <ChartPie style={props.style}>
      {props.children}
      <div className="content" ref={(ref) => {
        if (ref) {
          if (props.dataset) {
            myEchart = echarts.init(ref)
            echarts.registerMap('china', chinaJson);
            myEchart.setOption(getOption(myEchart, props));
          }
        }

      }} />
    </ChartPie>
  )
}

export default observer(Content)
